<template>
  <div>
    <mm-header></mm-header>
    <div class="brandList-container">
      <div class="container-title">
        <router-link to="/">首页</router-link>
        >
        <a href="javascript:void(0)" @click="handleBack">
          {{$store.state.brandTitle}}
        </a>
        >
        <a href="#">{{BrandName}}</a>
        >
        <!-- <button class="fr mui-btn-xs">筛选</button> -->
      </div>
      <div class="hotNav">
        <h3>{{BrandName}}</h3>
        <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media"
          v-for="(item ,index) in productList" :key="index"
          @click="handleJump"
          >
              <router-link :to="'/categorySonInfo/productid='+item.productId">
                  <img class="mui-media-object mui-pull-left"
                  :src="imgUrl(index)"
                  >
                  <div class="mui-media-body">
                      <p class="productName">
                        {{item.productName}}
                      </p>
                      <p class="productPrice">
                        {{item.productPrice}}
                      </p>
                      <p class='mui-ellipsis productSmall'>
                        <span>{{item.productQuote}}</span>
                        |
                        <span>
                          {{item.productCom}}
                        </span>
                      </p>
                  </div>
              </router-link>
          </li>
        </ul>
      </div>
    </div>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmHeader from "../publicComponents/mmHeader.vue";
import mmFooter from "../publicComponents/mmFooter.vue";
export default {
  data() {
    return {
      productList: [],
      BrandName: ''
    }
  },
  created() {
    this.getBrandName()
    this.getbrandproductlist()
  },
  methods: {
    getBrandName (){
      var num = this.$route.params.id.lastIndexOf('=')
      this.BrandName = this.$route.params.id.slice(num+1)
    },
    getbrandproductlist() {
      var id = this.$route.params.id
      this.$http.get('api/getbrandproductlist?'+id).then((res) => {
        this.productList = res.body.result
        console.log(this.productList)
      })
    },
    imgUrl(i) {
      var str = ''
      this.productList.forEach((item , index) => {
        if(i === index) {
          var num = item.productImg.indexOf('"')
          var num2 = item.productImg.indexOf('" alt')
          str = item.productImg.slice(num+1 ,num2)
        }
      })
      return str
    },
    handleBack() {
      this.$router.go(-1)
    },
    handleJump () {
      this.$store.commit( 'addBrandName' ,this.BrandName)
      console.log(this.$store.state.brandName)
    }
  },
  components: {
    mmHeader,
    mmFooter
  }
};
</script>
<style lang="less" scoped>
  @import '../../less/var';
  .brandList-container {
    position: relative;
    .container-title {
      padding-left: 25/@base;
      height: 76/@base;
      line-height: 76/@base;
      color: #000;
      font-size: 26/@base;
      background-color: #f5f5f5;
      a {
        color: #000;
        // text-decoration: underline;
      }
      .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
        padding: 8/@base 28/@base;
        font-size: 26/@base;
        margin-top: 8/@base;
        color: #000;
        background-color: #ccc;
      }
    }
    .hotNav {
      h3 {
        font-size: 26/@base;
        line-height: 1.5;
        padding-left: 20/@base;
        text-align: left;
        font-weight: 400;
        margin: 20/@base 0;
      }
    }
    position: relative;
    .container-title {
      padding-left: 25/@base;
      height: 76/@base;
      line-height: 76/@base;
      color: #000;
      font-size: 26/@base;
      background-color: #f5f5f5;
      a {
        color: #000;
        // text-decoration: underline;
      }
      .mui-btn, button, input[type=button], input[type=reset], input[type=submit] {
        padding: 8/@base 28/@base;
        font-size: 26/@base;
        margin-top: 8/@base;
        color: #000;
        background-color: #ccc;
      }
    }
    .mui-table-view .mui-media-object {
      line-height: 200/@base;
      max-width: 200/@base;
      height: 200/@base;
    }
    .mui-table-view .mui-media, .mui-table-view .mui-media-body {
      p.productName {
        font-size: 26/@base;
        font-weight: 700;
        line-height: 1.5;
        height: 80/@base;
        white-space: initial;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      p.productPrice {
        font-size: 24/@base;
        color: red;
        margin-top: 12/@base;
      }
    }
    p {
      font-size: 20/@base;
    }
    p.productSmall {
      position: absolute;
      bottom: 20/@base;
    }
    .mui-table-view-cell>a:not(.mui-btn) {
      white-space: unset;
    }
  }
</style>
